<template>
    <div>
        <h1>修改密码</h1>
        <div class="box">
            <van-field v-model="email" label="邮箱" label-width="46" placeholder="邮箱" />
            <form>
                <van-field type="password" v-model="password" label="旧密码" label-width="46" placeholder="旧密码" />
            </form>
            <form>
                <van-field type="password" v-model="newPassword" label="新密码" label-width="46" placeholder="新密码" />
            </form>
            <van-button class="btn" @click="change(email, password, newPassword)" round type="info">修改密码</van-button>
            <van-button @click="back" style="width: 80%;margin: 15px 10%;" round type="default">返回</van-button>
        </div>
    </div>
</template>

<script>
import { Toast } from 'vant';
import { changePasswordAPI } from '../api/API.js'
export default {
    name: 'changePassword',
    data() {
        return {
            email: "",
            password: "",
            newPassword: "",
            token: ""
        }
    },
    methods: {
        change(email, password, newPassword) {
            changePasswordAPI(email, password, newPassword).then((res) => {
                console.log(res);
                if (res.data.code == 200) {
                    Toast.success(res.data.msg);
                    localStorage.removeItem('token')
                    localStorage.removeItem('userID')
                    this.$router.push('/user')
                } else if (res.data.code == 3001) {
                    Toast.fail(res.data.msg);
                } else if (res.data.code == 2004) {
                    Toast.fail(res.data.msg);
                } else if (res.data.code == 400) {
                    Toast.fail(res.data.msg);
                } else if (res.data.code == 201) {
                    Toast.fail(res.data.msg);
                }
            })
        },
        // 返回
        back() {
            this.$router.push('/user')
        }
    },
    mounted() {
        this.token = localStorage.getItem('token')
    }
}
</script>

<style>
h1 {
    text-align: center;
    margin-top: 20%;
}

.box {
    background-color: #fff;
    margin: 0 auto;
    width: 90%;
}

.btn {
    width: 80%;
    margin: 60px 10% 0 10%;
}
</style>